<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入类库 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<style>
			 
				table{
					width: 100%;
					border-collapse: collapse;
				}
				table tr th,table tr td{
					height: 35px;
					border-bottom: solid 1px #999;
					text-align: center;
				}
				.clear-btn{
					text-align: right;
				}
		</style>
	</head>
	<body>

		<div id="app">
				
			<table>
				<tr>
					<th>编号</th>
					<th>姓名</th>
					<th>年龄</th>
					<th>操作</th>
				</tr>
				<tr v-for=" (user,index) in userList">
					<th>{{index}}</th>
					<th>{{user.name}}</th>
					<th>{{user.age}}</th>
					<th>
						<button @click="remove(index)">删除</button>
						
					</th>
				</tr>
				
			</table>
			  
			  <input type="button" value="清空" @click="clearData" />
			<hr>
			
			<form id="userForm" action="...." method="post">
				姓名: <input type="text" v-model="user.name" /> <br>
				年龄：<input type="text" v-model="user.age" />
				<input type="button" value="添加" @click="save" />
				
				
			</form>
			
			
			
		</div>
		
		<script>
			//观察者模式
			let vm = new Vue({
				el:'#app',
				data:{
					_pdata:'test', //私有属性， 不能通过 vm.直接点    
					user:{
					   name:'',
					   age:null
					},
					userList:[	   // userList 升级到vm的属性了
						{name:'张飞',age:17},     //{__ob__: Observer}
						{name:'刘备',age:19},
						{name:'关羽',age:18},
					]
				},
				methods:{
					remove(itemIndex){
						
						// console.log(vm._dsata._pdata)
						console.log(vm.userList)
						// itemIndex
						
						vm.userList.splice(itemIndex,1) ;//查找指定元素，删除
					},
					save(){
						//将user 发送到 后端  user ==》 JavaWeb 
						console.log("user",this.user)
						
						//重新查询一次
						// this.userList = new Array
						
						//模拟重新查询
						this.userList.push(this.user);
						
						//清空页面的输入项
						this.user = {  name:'', age:null };
						
					},
					clearData(){
						this.userList = [];
					}
				}
				
			})
		
		

		
		
		
		</script>

	</body>
</html>
